import * as React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Albums from './Shared/Albums';
import Article from './Shared/Article';
import Contacts from './Shared/Contacts';
// @ts-ignore
import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';

const tabBarIcon =
  (name: string) =>
  ({ tintColor, horizontal }: { tintColor: string; horizontal: boolean }) => (
    <MaterialIcons name={name} color={tintColor} size={horizontal ? 17 : 24} />
  );

class AlbumsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Albums',
    tabBarIcon: tabBarIcon('photo-album'),
    tabBarVisible: true,
    tabBarButtonComponent: TouchableBounce,
  };

  render() {
    return <Albums />;
  }
}

class ArticleScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Article',
    tabBarIcon: tabBarIcon('chrome-reader-mode'),
    tabBarButtonComponent: TouchableBounce,
    tabBarVisible: true,
  };

  render() {
    return <Article />;
  }
}

class ContactsScreen extends React.Component {
  static navigationOptions = {
    tabBarIcon: tabBarIcon('contacts'),
    tabBarVisible: true,
    tabBarButtonComponent: TouchableBounce,
  };

  render() {
    return <Contacts />;
  }
}

class BackHome extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Back',
    tabBarIcon: tabBarIcon('home'),
    tabBarVisible: true,
    tabBarButtonComponent: TouchableBounce,
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      defaultHandler();
      navigation.navigate('Home');
    },
  };

  render(): React.ReactNode {
    return null;
  }
}

export default createBottomTabNavigator(
  {
    Albums: {
      screen: AlbumsScreen,
    },
    Article: {
      screen: ArticleScreen,
    },
    Contacts: {
      screen: ContactsScreen,
    },
    Back: {
      screen: BackHome,
    },
  },
  {
    initialRouteName: 'Albums',
    defaultNavigationOptions: {
      tabBarLabel: 'Tab',
    },
    paths: {
      Contacts: 'page/main',
    }, // 需要修改
    backBehavior: 'initialRoute',
    // detachInactiveScreens: true, // defalut
    lazy: true,
    tabBarOptions: {
      activeTintColor: '#178517ff',
      inactiveTintColor: '#23178dff',
      inactiveBackgroundColor: '#84cf91ff',
      activeBackgroundColor: '#d1237aff',
      // showLabel: true,  // defalut
      // showIcon: true, // defalut
      labelStyle: {
        fontSize: 20,
        justifyContent: 'center',
      },
      style: {
        height: 40,
        backgroundColor: '#4892ceff',
      },
      labelPosition: 'beside-icon',
      allowFontScaling: true, // defalut
      // adaptive: true, // 仅ios
      safeAreaInset: {
        top: 'always',
        bottom: 'never',
        left: '20',
        right: '40',
      },
    },
  },
);